<template>
  <Dialog
    ref="dialog"
    width="1000"
    :title="ruleForm.id ? '修改账号' : '创建账号'"
  >
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      label-width="auto"
      :rules="rules"
      status-icon
    >
      <el-form-item class="form_item" label="姓名" prop="realName">
        <el-input v-model="ruleForm.realName" />
      </el-form-item>
      <el-form-item class="form_item" label="手机号" prop="mobile">
        <el-input v-model="ruleForm.mobile" maxlength="11" />
      </el-form-item>
      <el-form-item class="form_item" label="一级分类" prop="bigRoleId">
        <el-select
          v-model="ruleForm.bigRoleId"
          placeholder=""
          style="width: 100%"
        >
          <el-option
            v-for="item in role"
            :key="item.id"
            :label="item.name"
            :value="item.id"
            @click="onClickBigRole(item)"
          />
        </el-select>
      </el-form-item>
      <el-form-item class="form_item" label="二级分类" prop="roleId">
        <el-select v-model="ruleForm.roleId" placeholder="" style="width: 100%">
          <el-option
            v-for="item in roleDate"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-divider />
      <div class="right">
        <el-button class="height40" @click="closeChange">取消</el-button>
        <el-button type="primary" class="height40" @click="submit"
          >提交</el-button
        >
      </div>
    </el-form>
  </Dialog>
</template>
<script setup>
import { ref } from 'vue';
import Dialog from '@/components/Dialog/Dialog.vue';
import { accountCreate, myRoleList } from '@/api/system/account.js';
import { ElMessage } from 'element-plus';

const dialog = ref(null);
const ruleForm = ref({});
const role = ref([]);
const roleDate = ref([]);
const emit = defineEmits(['accountLists']);
let { proxy } = getCurrentInstance();
const checkedCities = ref([]);
const cities = ref([]);
const checkAll = ref(false);

// 用户信息
const user = JSON.parse(localStorage.getItem('userDateInfo')) || {};

const handleCheckAllChange = (val) => {
  checkedCities.value = val ? cities.value : [];
};

// 校验规则
const rules = {
  realName: [{ required: true, trigger: 'blur', message: '请输入您的姓名' }],
  mobile: [{ required: true, trigger: 'blur', message: '请输入您的手机号' }],
  bigRoleId: [{ required: true, trigger: 'blur', message: '请选择一级分类' }],
  roleId: [{ required: true, trigger: 'blur', message: '请选择二级分类' }],
};

function closeChange() {
  dialog.value.closeChange();
}

function submit() {
  let a = [];
  proxy.$refs.ruleFormRef.validate((valid) => {
    if (valid) {
      for (const v of checkedCities.value) {
        a.push(v.id);
      }
      ruleForm.value.pid = a.join(',');
      accountCreate(ruleForm.value).then((res) => {
        if (res.code === 20000) {
          ElMessage.success('操作成功');
          dialog.value.closeChange();
          emit('accountLists');
        }
      });
    } else {
      ElMessage.warning('请完善信息');
    }
  });
}

function getUserList() {
  myRoleList({ roleId: user.roleId }).then((res) => {
    if (res.code === 20000) {
      role.value = res.data;

      const index = role.value.findIndex(
        (item) => item.id == ruleForm.value.bigRoleId
      );

      if (index >= 0) {
        roleDate.value = role.value[index].children;
      }
    }
  });
}

function openchange(val) {
  dialog.value.openChange();
  nextTick(() => {
    getUserList();
  });
  // 转换成数字类型
  if (val?.pid) {
    let a = val?.pid.split(',').map((item) => parseInt(item, 10));
    checkedCities.value = cities.value.filter((v) => a?.includes(v.id));
    if (checkedCities.value.length == cities.value.length) {
      checkAll.value = true;
      handleCheckAllChange(true);
    }
  } else {
    checkedCities.value = [];
    checkAll.value = false;
  }

  if (val && val.id) {
    ruleForm.value = val;
  } else {
    ruleForm.value = {};
    roleDate.value = {};
  }
}

defineExpose({
  openchange,
});

function onClickBigRole(item) {
  roleDate.value = item.children;
  ruleForm.value.roleId = '';
}
</script>
<style>
.form_item {
  margin-bottom: 20px !important;
}
</style>
